<template>
  <span class="date-range-picker">
    <el-date-picker  v-model="value[0]" type="date" :placeholder="startPlaceholder" value-format="yyyy-MM-dd" v-bind="$attrs" @change="onChange" :picker-options="startPickerOptions"></el-date-picker>
    <span class="range-separator">至</span>
    <el-date-picker  v-model="value[1]" type="date" :placeholder="endPlaceholder" value-format="yyyy-MM-dd" v-bind="$attrs" @change="onChange"  :picker-options="endPickerOptions"></el-date-picker>
  </span>
</template>

<script>
import moment from "moment";
export default {
    name:"date-range-picker",
    model:{
      prop:"value",  
      event:"change",
    },
    data(){
        return {
            startPickerOptions:{
                disabledDate:(time)=> {
                    if(this.value[1]){
                        let endTime = moment(this.value[1], "YYYY-MM-DD").valueOf();
                        if(this.minDate){
                            return time.getTime() < this.minDate || time.getTime() > endTime;
                        }else{
                            return time.getTime() > endTime;
                        }
                    }else{
                        if(this.minDate){
                            return time.getTime() < this.minDate;
                        }else if(this.maxDate){
                            return time.getTime() > this.maxDate;
                        }else{
                            return false;
                        }
                    }
                },
            },
            endPickerOptions:{
                disabledDate: (time)=> {
                   if(this.value[0]){
                        let startTime = moment(this.value[0], "YYYY-MM-DD").valueOf();
                        if(this.maxDate){
                            return time.getTime() > this.maxDate || time.getTime() < startTime;
                        }else{
                            return time.getTime() < startTime;
                        }
                    }else{
                        if(this.minDate){
                            return time.getTime() < this.minDate;
                        }else if(this.maxDate){
                            return time.getTime() > this.maxDate;
                        }else{
                            return false;
                        }
                    }
                },
            }
        }
    },
    props:{
        value:{
            type:Array,
            default:()=>{
                return [void 0,void 0]
            }
        },
        startPlaceholder:{
            type:String,
            default:"开始日期"
        },
        endPlaceholder:{
            type:String,
            default:"结束日期"
        },
        minDate:{
            type: Number,
            default: void 0
        },
        maxDate:{
            type: Number,
            default: void 0
        }
    },
    methods:{
        onChange(){
            this.$emit("change",this.value);
        },
        
    }
}
</script>

<style lang="scss" scoped>
    .date-range-picker{
        .start-date-label{
             font-weight: bold;
        }
        .range-separator{
            font-weight: bold;
            margin: 0 8px;
        }
        .end-date-label{
             font-weight: bold;
        }
    }
</style>